<template class="body">
    <el-container>
        <el-aside width="200px" class="left">
            <div class="logo">
                <div class="logoImg turn"></div>
                <div><font class="bios">BIOS</font></div>
            </div>
            <left-menu/>
        </el-aside>
        <el-container>
            <el-header width="200px" class="h">
                <top-menu class="top"></top-menu>
            </el-header>
            <el-main>
                <main-index></main-index>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import topMenu from "./top/menu"
    import leftMenu from "./left/menu"
    import mainIndex from "./main/index"
    export default {
        name: "index",
        components: {
            topMenu,
            leftMenu,
            mainIndex
        }
    }
</script>

<style scoped>

    .body{
        margin: 0;
        display: block;
        background-color: cornflowerblue;
    }

    .logo{
        height: 60px;
        width: 200px;
        background-color: #545C64;
    }
    .logoImg{
        height: 50px;
        width: 50px;
        background-image: url("../assets/logo.png");
        //background-color: darkorange;
        background-size:60px 60px;
        float: left;
        border-radius: 200px;
        margin-left: 20px;
        margin-top: 5px;
        margin-bottom: 5px;
        transform: rotate(45deg);
    }

    .top{
        //margin-left: 180px;
        //width: 500px;
    }
    .left{
        //margin-top: 60px;
    }
    .h{
        padding: 0px 0px;
    }
    .bios{
        font-size: 40px;
        margin-left: 15px;
        margin-top: 5px;
        margin-bottom: 5px;
        color: cornflowerblue;
    }

</style>

<style>
    /* 旋转动画 指定class为trun即可使用*/
    .turn {
        animation: turn 10s linear infinite;
    }

    /*
    turn : 定义的动画名称
    10s : 动画时间
    linear : 动画平滑
    infinite :使动画无限循环
    transform:rotate(旋转角度)
    %0:动画开始
    %100:动画结束
    */
    @keyframes turn {
        0% {
            transform: rotate(0deg);
        }

        20% {
            transform: rotate(72deg);
        }

        40% {
            transform: rotate(144deg);
        }

        60% {
            transform: rotate(216deg);
        }

        80% {
            transform: rotate(288deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

<style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
</style>